<template>
  <crud-table :config="crudConfig" />
</template>

<script setup>
import { h } from 'vue'
import { NTag, NAvatar } from 'naive-ui'
import moment from 'moment'
import ImageUpload from '@/components/ImageUpload/index.vue'

const crudConfig = {
  title: '用户管理',
  apiPrefix: '/user', // API 前缀
  primaryKey:'user_id',
  searchable: true,
  creatable: true,
  editable: true,
  deletable: true,
  switchable:true,
  switchKey:'status',
  row_show_switchable:(row)=>{
    return !(row.user_type==='admin')
  },
  // 表格列配置
  columns: [
    {
      title: '头像',
      key: 'avatar',
      render: (row) => {
        return h(NAvatar, {
          size: 'small',
          round: true,
          src: row.avatar || '/avatar.png'
        })
      }
    },
    { title: '手机号', key: 'phone' },
    { title: 'openid', key: 'openid' },
    { title: '昵称', key: 'nickname' },
    {
      title: '角色',
      key: 'user_type',
      render: (row) => {
        const roleType = {
          admin: { type: 'primary', label: '管理员' },
          employer: { type: 'success', label: '企业' },
          chef: { type: 'info', label: '普通用户' }
        }
        const user_type = roleType[row.user_type] || { type: 'default', label: '未知' }
        return h(NTag, { type: user_type.type }, { default: () => user_type.label })
      }
    },
    {
      title: '性别',
      key: 'gender',
      render: (row) => {
        const roleType = {
          man: { type: 'primary', label: '男' },
          woman: { type: 'success', label: '女' },
          secret: { type: 'info', label: '保密' }
        }
        const user_type = roleType[row.gender] || { type: 'default', label: '未知' }
        return h(NTag, { type: user_type.type }, { default: () => user_type.label })
      }
    },
    { title: '年龄', key: 'age' },
    { title: '自我介绍', key: 'self_intro' },
    { title: '生日', key: 'birth_day' },
    {
      title: '状态',
      key: 'status',
      render: (row) => {
        return h(NTag, { type: row.status ? 'success' : 'error' },
          { default: () => row.status ? '启用' : '禁用' }
        )
      }
    },
    {
      title: '注册时间',
      key: 'created_at',
      render: (row) => {
        return row.created_at && moment(row.created_at).format('YYYY-MM-DD HH:mm:ss')
      }
    },
  ],

  // 搜索字段配置
  searchFields: [
    { label: '手机号', key: 'phone', type: 'input' },
    {
      label: '角色',
      key: 'user_type',
      type: 'select',
      options: [
        { label: '管理员', value: 'admin' },
        { label: '企业', value: 'employer' },
        { label: '普通用户', value: 'user' }
      ]
    },
    {
      label: '状态',
      key: 'status',
      type: 'select',
      options: [
        { label: '启用', value: 1 },
        { label: '禁用', value: 0 }
      ]
    }
  ],

  // 表单字段配置
  formFields: [
    {
      label: '头像',
      key: 'avatar',
      type: 'custom',
      span: 24,
      render: ({ value, onChange }) => {
        return h(ImageUpload, {
          value,
          'onUpdate:value': onChange
        })
      }
    },
    { label: '手机号', key: 'phone', type: 'input', span: 12  },
    { label: '密码', key: 'password', type: 'password', span: 12 },
    { label: '昵称', key: 'nickname', type: 'input', span: 12 },
    {
      label: '角色',
      key: 'user_type',
      type: 'select',
      span: 12,
      options: [
        { label: '管理员', value: 'admin' },
        { label: '企业', value: 'employer' }
      ]
    },
    {
      label: '性别',
      key: 'gender',
      type: 'select',
      span: 12,
      options: [
        { label: '男', value: 'man' },
        { label: '女', value: 'woman' },
        { label: '保密', value: 'secret' }
      ]
    },
    { label: '年龄', key: 'age', type: 'input', span: 12 },
  ],

  // 表单验证规则
  rules: {
    avatar: { required: false, message: '请上传头像' },
    phone: { required: true, message: '请输入手机号' },
    nickname: { required: true, message: '请输入昵称' },
    user_type: { required: true, message: '请选择角色' }
  },

  // 表格配置
  tableConfig: {
    rowKey: 'id',
    pagination: true,
    bordered: false,
    size: 'medium',
    striped: true
  }
}
</script>
